<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta
      http-equiv="X-UA-Compatible"
      content="IE=edge"
    />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1.0"
    />
    <title>Document</title>
    <link
      rel="stylesheet"
      href=""
    />
    <style>
      .box {
        width: 484px;
        margin: 50px auto;
        height: 200px;
        display: flex;
      }

      .small,
      .large {
        width: 200px;
        margin-right: 40px;
        position: relative;
        background: url(./Aatrox.png) 0 0 / 200px no-repeat;
      }

      .large {
        background-size: 400px;
        display: none;
      }

      .indicator {
        width: 98px;
        height: 98px;
        position: absolute;
        border: 1px dashed #fff;
        pointer-events: none;
        background-color: rgba(255, 255, 255, 0.4);
        display: none;
      }
    </style>
  </head>
  <body>
    <div class="box">
      <div class="small">
        <div class="indicator"></div>
      </div>
      <div class="large"></div>
    </div>
    <script src=""></script>
    <script>
      const small = document.querySelector('.small')
      const large = document.querySelector('.large')
      const indicator = document.querySelector('.indicator')

      const smallWidth = small.clientWidth
      const smallHeight = small.clientHeight

      small.addEventListener('mouseleave', () => {
        large.style.display = 'none'
        indicator.style.display = 'none'
      })

      small.addEventListener('mousemove', (e) => {
        const indicatorWidth = indicator.clientWidth
        let moveX = e.offsetX - indicatorWidth / 2
        if (moveX < 0) {
          moveX = 0
        }
        if (moveX > smallWidth - indicatorWidth) {
          moveX = smallWidth - indicatorWidth
        }
        indicator.style.left = moveX + 'px'

        const indicatorHeight = indicator.clientHeight
        let moveY = e.offsetY - indicatorHeight / 2
        if (moveY < 0) {
          moveY = 0
        }
        if (moveY > smallHeight - indicatorHeight) {
          moveY = smallHeight - indicatorHeight
        }
        indicator.style.top = moveY + 'px'

        large.style.backgroundPosition = `-${moveX * 2}px -${moveY * 2}px`
      })

      small.addEventListener('mouseenter', (e) => {
        large.style.display = 'block'
        indicator.style.display = 'block'
      })
    </script>
  </body>
</html>
